<template>
    <Modal
        v-model="modal.show"
        :title="modal.title"
        :loading="modal.loading"
        @on-ok="saveContent"
        @on-cancel="hideModal"
    >
        <!-- <template slot-scope="props"> -->
        <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
            <FormItem label="名称" prop="name">
                <Input
                    v-model="formValidate.name"
                    :maxlength="64"
                    :placeholder="nameErrorTipNotSC"
                ></Input>
            </FormItem>
            <!-- <FormItem label="方向" prop="typeCode" key="typeCode">
                <Cascader
                    :data="treeDirectionData"
                    v-model="formValidate.typeCode"
                    clearable
                    placeholder="请选择科研方向"
                />
            </FormItem> -->
            <!-- <FormItem label="方向" prop="direction">
                <Select filterable
                    v-model="formValidate.direction"
                    placeholder="方向"
                    filterable
                    @on-change="changeDirection"
                >
                    <Option v-for="(value, key) in directionArr" :value="value.dictid" :key="key">{{
                        value.dictname
                    }}</Option>
                </Select>
            </FormItem> -->
            <!-- showTypeArr -->
            <!-- <FormItem label="类型" prop="typeCode">
                <Select filterable v-model="formValidate.typeCode" placeholder="类型" filterable>
                    <Option v-for="(value, key) in directionArr" :value="value.dictid" :key="key">{{
                        value.dictname
                    }}</Option>
                </Select>
            </FormItem> -->
            <!-- <FormItem label="指导老师" prop="inviter" key="inviter">
                <Select filterable v-model="formValidate.inviter" filterable clearable>
                    <Option
                        v-for="designer in rootDesignerList"
                        :value="designer.id"
                        :key="designer.id"
                        >{{ designer.nickname }}</Option
                    >
                </Select>
            </FormItem>
            <FormItem label="科研人员" prop="accepter" key="accepter" v-if="isRootDesigner">
                <Select filterable v-model="formValidate.accepter" filterable>
                    <Option
                        v-for="designer in designerList"
                        :value="designer.id"
                        :key="designer.id"
                        >{{ designer.nickname }}</Option
                    >
                </Select>
            </FormItem> -->
            <FormItem label="描述" prop="description" key="description">
                <!-- <Input
                    type="textarea"
                    v-model="formValidate.description"
                    :maxlength="200"
                    placeholder="请输入描述"
                ></Input> -->
                <quillEditor 
                    ref="myQuillEditor" 
                    :dataValue="formValidate.description" 
                    @editorChange="onEditorChange">
                </quillEditor>
            </FormItem>
            <!-- <FormItem label="封面图片" prop="iconPath" key="iconPath">
                <itemUpload
                    ref="logoUpload"
                    showChooseBtn
                    isSingle
                    @upload-success="(val) => uploadSuccess(val, 'iconPath')"
                    :formatArr="['jpg', 'png', 'jpeg']"
                    uploadText="上传图片"
                    @clearFile="setClear('iconPath')"
                    fileType="images"
                ></itemUpload>
            </FormItem> -->
        </Form>
        <!-- </template> -->
    </Modal>
</template>
<script>
import ModalTemplate from '@/components/list-template/modal-template.vue';
import itemUpload from '@/components/item-upload/index.vue';
import quillEditor from '@/components/quillEditorNew/quill-editor.vue'
import typeAndDirectionMixin from '@/mixin/typeAndDirectionMixin.js';
import { addContent, updateContent } from '@/api/scientific/content.js';
import { getCompanyUsers } from '@/api/identity.js';
import { mapState } from 'vuex';
import { validateNameCNLU, nameErrorTipCNLU } from '@/libs/reg';

// import { validateName1,nameErrorTipNotSC } from '@/libs/reg';
// import { nameErrorTipNotSC } from '@/libs/tip';
export default {
    name: 'EditModal',
    components: { ModalTemplate, itemUpload, quillEditor},
    mixins: [typeAndDirectionMixin], //treeDirectionData
    // inject: ['parent'],
    props: {
        type: {
            type: String,
            default: 'apply',
        },
        title: {
            type: String,
            default: '科研申请',
        },
    },
    data() {
        return {
            nameErrorTipNotSC: nameErrorTipCNLU,
            modal: {
                show: false,
                data: '',
                loading: true,
            },
            formValidate: {
                description: '',
                iconPath: '',
                name: '',
                direction: '',
                typeCode: '',
                inviter: '',
                accepter: '',
                creatorName: '',
                checkStatus: 1, //默认审核通过
                // checkStatus: this.type == 'apply' ? 0 : 1 //申请默认未审核，指派默认审核
            },
            ruleValidate: {
                name: [
                    { required: true, message: '请输入科研名称', trigger: 'blur' },
                    { validator: validateNameCNLU, trigger: 'change, blur' },
                ],
                direction: [
                    {
                        required: true,
                        message: '请选择科研方向',
                        trigger: 'change',
                    },
                ],
                typeCode: [
                    {
                        required: true,
                        message: '请选择科研类型',
                        trigger: 'change',
                    },
                ],
                accepter: [
                    {
                        required: true,
                        message: '请选择科研人员',
                        trigger: 'change',
                    },
                ],
            },
            allDesignerList: [],
        };
    },
    computed: {
        ...mapState('user', ['nickname', 'userId', 'isRootDesigner']),
        rootDesignerList() {
            //单位管理员
            return this.allDesignerList.filter((designer) => designer.role === 'leader');
        },
        designerList() {
            //单位设计师
            return this.allDesignerList.filter((designer) => designer.role === 'member');
        },
    },
    watch: {},
    mounted() {
        this._formValidate = { ...this.formValidate, accepter: this.userId };
    },
    methods: {
        showModal(data) {
            // this.$refs.logoUpload.clearFile();
            // this.getCompanyUserList();
            let name = this.title;
            this.modal.show = true;
            this.op = data ? 'update' : 'add';
            if (!data) {
                this.modal.title = `创建${name}`;
                this.resetField();
                this.formValidate.iconPath = '';
            } else {
                this.modal.title = `修改${name}`;
                // let direction = this.getDirectionWithCodeType(data.typeCode);
                // this.filterTypeWithDirection(direction);
                // data.iconPath
                //     ? this.$refs.logoUpload.showDefaultList({ filePath: data.iconPath })
                //     : this.$refs.logoUpload.showDefaultList(null);
                this.formValidate = {
                    ...data,
                    // direction: direction,
                    typeCode: data.typeCode,
                };
            }
        },
        changeDirection(name) {
            this.filterTypeWithDirection(name);
            this.formValidate.typeCode = '';
        },
        resetField() {
            this.formValidate = { ...this._formValidate };
            this.$refs.formValidate.resetFields();
        },
        saveContent() {
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    let params, reqApi, txt;
                    if (this.op == 'add') {
                        let params = { ...this.formValidate, creatorName: this.nickname };
                        reqApi = addContent(params);
                        txt = '创建';
                    } else {
                        params = { ...this.formValidate };
                        reqApi = updateContent(params.id, params);
                        txt = '修改';
                    }
                    reqApi
                        .then(({ code, data, message }) => {
                            if (code === 1) {
                                this.$Message.info(`${txt}成功`);
                                this.hideModal();
                                this.$emit('ok', this.op);
                            } else {
                                this.$Message.error(message);
                            }
                            this.cancelLoading();
                        })
                        .catch((error) => {
                            this.cancelLoading();
                        });
                } else {
                    this.cancelLoading();
                }
            });
        },
        // 单位人员列表
        getCompanyUserList() {
            // let role = this.type === 'apply' ? 'leader' : 'member';
            let params = {
                pageIndex: 1,
                pageSize: 1000000,
                order: 'desc',
                sortBy: 'created',
                type: 'designer',
                // role: role //member / leader
            };
            getCompanyUsers(params)
                .then(({ code, data, message }) => {
                    if (code === 1) {
                        this.allDesignerList = data.items;
                    } else {
                    }
                })
                .catch((err) => {});
        },
        hideModal() {
            this.modal.show = false;
        },
        cancelLoading() {
            this.modal.loading = false;
            setTimeout(() => {
                this.modal.loading = true;
            });
        },
        uploadSuccess(val, type) {
            this.formValidate.iconPath = val.filePath;
        },
        setClear() {
            this.formValidate.iconPath = '';
        },
        onEditorChange(val){
            this.formValidate.description = val;
        }
    },
};
</script>
<style scoped></style>
